<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <!--操作 -->
    <button-area :style="{ paddingLeft: '80px' }"></button-area>
    <FilterTable
      ref="table"
      columnsRef="testindex"
      selectionType="single"
      :columns="columns"
      :fetchapi="fetchApi"
      :rowstyles="rowstyles"

      :params="fetchParams"
      :isSelectColumn="false"
      :datakey="'records'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectData"
      :isExportExcel2="true"
      :exportFileName="'备件理赔退货查询.xlsx'"
    >
    <!-- <template slot="controls">
        <el-button size="small" type="primary"  @click="exportClick">导出</el-button>
      </template> -->
      <!-- <template slot="controls" slot-scope="props">
        <multiuse-button size="small" type="primary" :loading="exportLoading" :click="exportData.bind()">导 出</multiuse-button>
      </template> -->
      <template slot="controls">
        <multiuse-button size="small" type="primary" :click="exportData.bind()">明细导出</multiuse-button>
      </template>
    </FilterTable>

    <Drawer
      :visible.sync="visibleDrawer"
      title= "理赔退货明细"
      width="80vw"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
       >
      <infoModal v-model="initData" @close="infoClose" />
    </Drawer>

    <BaseDialog
      :visible.sync="isShowSearchCustomer"
      :title="'服务商查询'"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <ownerSeacher  @close="dealercloseHandler" />
    </BaseDialog>


  </div>
</template>

<script>
// import infoDetail from '../selectRtdoos/info';
import infoModal from './info';
import { dictionary } from '@/utils/dictMixin';
import { getRtgoodsData,getRefundDetailExport } from '@/api/partsmanage/claimRefundManage/audit';
import ownerSeacher from '@/pages/partsmanage/claim/approve/ownerSeacher';
import { exportExcelFile } from '@/utils/index';
import moment from 'moment';
export default {
  name: 'chaimapproveindex',
  mixins: [dictionary],
  components: {
    infoModal,
    ownerSeacher
  },
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      fetchParams: { xhrAbort: true },
      columns: this.createTableColumns(),
      fetchApi: getRtgoodsData,
      tableData: [],
      visibleDrawer: false,
      visibleDrawer1: false,
      rowstyles: [],
      initData: {},
      issearch:false,
      showDetailFlag: false,
      isShowSearchCustomer:false,
      kehuxuanze: ''
    }
  },
  mounted() {
    // 分页
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '服务商代码',
          fieldName: 'dealerCode',
          readonly: true,
          unitRender: () => {
            return (
              <el-button
                icon="el-icon-search"
                onClick={() => {
                  this.isShowSearchCustomer = true;
                }}
              ></el-button>
            );
          },
          onEnter: val => {
            console.log('对方经销商 onEnter');
            this.isShowSearchCustomer = true;
          }
        },
        {
          type: 'INPUT',
          label: '服务商简称',
          fieldName: 'dealerShortname',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '申请单号',
          fieldName: 'applyNum'
        },
        {
          type: 'SELECT',
          label: '理赔退货类型',
          fieldName: 'claimRefundType',
          placeholder: '请选择...',
          itemList: this.createDictList('3057')
        },
        {
          type: 'SELECT',
          label: '申请原因',
          fieldName: 'applyCause',
          placeholder: '请选择...',
          itemList: this.createDictList('3058')
        },
        {
          type: 'SELECT',
          label: '交货单来源',
          fieldName: 'zjhdly',
          placeholder: '请选择...',
          itemList: this.createDictList('3056')
        },
        {
          type: 'INPUT',
          label: '交货单号',
          fieldName: 'bsysdh'
        },
        {
          type: 'SELECT',
          label: '申请单状态',
          fieldName: 'applyStatus',
          placeholder: '请选择...',
          itemList: this.createDictList('3059',[30591001])
          // itemList: this.createDictList('3059',[30591001,30591002])
        },
        {
          type: 'SELECT',
          label: '受理状态',
          fieldName: 'acceptanceStatus',
          placeholder: '请选择...',
          itemList: this.createDictList('3060')
          // itemList: this.createDictList('3059',[30591001,30591002])
        },
        {
          type: 'SELECT',
          label: '过账状态',
          fieldName: 'transferStatus',
          placeholder: '请选择...',
          itemList: this.createDictList('3063')
          // itemList: this.createDictList('3059',[30591001,30591002])
        },
        {
          type: 'SELECT',
          label: '退库状态',
          fieldName: 'returnStatus',
          placeholder: '请选择...',
          itemList: this.createDictList('3062')
          // itemList: this.createDictList('3059',[30591001,30591002])
        },
        {
          type: 'SELECT',
          label: '开票状态',
          fieldName: 'invoiceStatus',
          placeholder: '请选择...',
          itemList: this.createDictList('3051')
          // itemList: this.createDictList('3059',[30591001,30591002])
        },

        {
          type: 'RANGE_DATE',
          fieldName: 'applyBeginDate|applyEndDate',
          label: '提报时间',
          initialValue: [
          moment(new Date())
              .subtract(1, 'month')
              .format('YYYY-MM-DD 00:00:00'),
            moment(new Date()).format('YYYY-MM-DD 23:59:59')
          ],
          dateType: 'daterange'
        },
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          // disabled={disabled}
          render: params => {
            // let disabled = false;
            // console.log(params.row.xsddzt)
            // if(params.row.xsddzt != '30591003' && params.row.xsddzt != '30591007') {
            //   disabled = true
            // };
            return (
              <div>
                <multiuse-button size="mini" type="text" onClick={() => this.detailHandle(params.row, 'edit')}>
                  明细
                </multiuse-button>
                {/* <multiuse-button  size="mini" type="text" onClick={() => this.detailShow(params.row, 'show')}>
                  明细
                </multiuse-button> */}
              </div>
            );
          }
        },
        {
          title: '服务商代码',
          dataIndex: 'dealerCode',
          sorter: true,
          // width: 160
        },
        {
          title: '服务商简称',
          dataIndex: 'dealerName',
          sorter: true,
          width: 200
        },
        {
          title: '申请单号',
          dataIndex: 'applyNum',
          sorter: true,
          width: 160
        },
        {
          title: '理赔退货类型',
          dataIndex: 'claimRefundType',
          sorter: true,
          // width: 100,
          editItems: this.createDictList('3057')
        },
        {
          title: '申请原因',
          dataIndex: 'applyCause',
          sorter: true,
          // width: 100,
          editItems: this.createDictList('3058')
        },
        {
          title: '交货单来源',
          dataIndex: 'zjhdly',
          sorter: true,
          // width: 100,
          editItems: this.createDictList('3056')
        },
        {
          title: '交货单号',
          dataIndex: 'bsysdh',
          sorter: true,
          width: 160
        },
        {
          title: '申请单状态',
          dataIndex: 'applyStatus',
          sorter: true,
          // width: 100,
          editItems: this.createDictList('3059')
        },
        {
          title: '受理状态',
          dataIndex: 'acceptanceStatus',
          sorter: true,
          // width: 100,
          editItems: this.createDictList('3060')
        },
        {
          title: '过账状态',
          dataIndex: 'transferStatus',
          sorter: true,
          // width: 100,
          editItems: this.createDictList('3063')
        },
        {
          title: '退库状态',
          dataIndex: 'returnStatus',
          sorter: true,
          // width: 100,
          editItems: this.createDictList('3062')
        },
        {
          title: '开票状态',
          dataIndex: 'invoiceStatus',
          sorter: true,
          // width: 100,
          editItems: this.createDictList('3051')
        },
        {
          title: '申请品种合计',
          dataIndex: 'applyKind',
          sorter: true,
          width: 160
        },
        {
          title: '申请数量合计',
          dataIndex: 'applyAmount',
          sorter: true,
          width: 160
        },
        {
          title: '申请金额合计',
          dataIndex: 'applyMoney',
          sorter: true,
          width: 160,
          // precision: 2,
          // numberFormat: true,
        },
        {
          title: '受理数量',
          dataIndex: 'acceptSum',
          sorter: true,
          width: 160
        },
        {
          title: '受理金额',
          dataIndex: 'acceptMoneySum',
          sorter: true,
          width: 160,
          // precision: 2,
          // numberFormat: true,
        },
        {
          title: '未受理数量',
          dataIndex: 'rejectAmount',
          sorter: true,
          width: 160
        },
        {
          title: '过账数量',
          dataIndex: 'transferAmountSum',
          sorter: true,
          width: 160
        },
        {
          title: '过账金额',
          dataIndex: 'transferMoneySum',
          sorter: true,
          width: 160,
          precision: 2,
          numberFormat: true,
        },
        {
          title: '退库数量',
          dataIndex: 'returnedQuantitySum',
          sorter: true,
          width: 160
        },
        {
          title: '开票金额',
          dataIndex: 'invoiceMoneySum',
          sorter: true,
          width: 160,
          precision: 2,
          numberFormat: true,
        },
        {
          title: '提报时间',
          dataIndex: 'applyTime',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          sorter: true,
          width: 140
        },
        {
          title: '审核人',
          dataIndex: 'auditByname',
          sorter: true,
          // width: 100
        },
        {
          title: '审核时间',
          dataIndex: 'auditTime',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          filter: true,
          sorter: true,
          filterType: 'date-range',
          width: 140
        },
      ];
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, {
        // xsddzt: '30101002',
        // cxlx: 'approve', xhrAbort: false
        applyBeginDate: val.applyBeginDate ? val.applyBeginDate.split(' ')[0]+' 00:00:00' : '',
        applyEndDate: val.applyEndDate ? val.applyEndDate.split(' ')[0] +' 23:59:59': '',
        // applyStatus: 30591003 // 审核页面只查询待厂端审核的单据

        });
      // this.fetchParams = Object.assign(this.fetchParams, {
      //   ...e,
      //   submStartDate: e.submStartDate ? e.submStartDate.split(' ')[0]+' 00:00:00' : '',
      //   submEndDate: e.submEndDate ? e.submEndDate.split(' ')[0] +' 23:59:59': '',
      // });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    selectData(val) {
      this.tableData = val;
    },
    detailHandle(row,type) {
      this.initData =  {
        type: type,
        data: row,
        id:1001
      }; //行id
      this.visibleDrawer = true;
    },
    detailShow(row,type) {
      this.initData =  {
        type: type,
        data: row,
        id:1001
      }; //行id
      this.visibleDrawer1 = true;
    },
    infoClose(rData) {
      this.showDetailFlag = false;
      this.visibleDrawer = false;
      this.visibleDrawer1 = false;
      if (rData.type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    async confirmSearchCustomer(row) {
      console.log(row, 'rowCustomer');
      this.rowData = row[0];
      console.log('row[0].dealerCode', row[0].dealerCode);
      this.topFilterList.find(x => x.fieldName == 'dealerCode').initialValue = row[0].dealerCode;
      this.topFilterList.find(x => x.fieldName == 'dealerName').initialValue = row[0].dealerName;
    },
    seacherFun(){
      this.issearch=true;
    },
    // syncPjFun(details, isOverdue){
    //   if (!details.length) return;
    //   details.forEach(x => {
    //     if (x.sfcq == '已超期') {
    //       // console.log(x,"x")
    //       this.rowstyles.push({ row: x, styles: { background: '#FF0000' } });
    //     }
    //   });
    // },
    showDetail(row,type) {
      this.initData =  {
        type: type,
        data: row,
        id:1001
      }; //行id
      this.showDetailFlag = true;
    },
    dealercloseHandler(val){
      if(val){
        this.topFilterList.find(x=>x.fieldName=='dealerCode').initialValue=val.dealerCode;
        this.topFilterList.find(x=>x.fieldName=='dealerShortname').initialValue=val.dealerShortname;
      }
      this.isShowSearchCustomer=false;
    },

    // 明细导出
    async exportData() {
      let params = { ...this.fetchParams };
      console.log(params, '导出::');
      let res = await getRefundDetailExport(params);
      console.log(res, '导出::');
      console.log(Number(res.data.size) === 0, '导出数据是否为空');
      if (Number(res.data.size) === 0) {
        return this.$notify.warning({ title: '提示信息', message: '数据为空，无法导出!' });
      }
      console.log(res.data, '导出::');
      try {
        exportExcelFile(res.data, '理赔退货明细查询导出');
      } catch (e) {
        console.log(e, '错误::');
      }
    },

  }
}
</script>
